<template>
  <div class="divBox">
    <el-card class="box-card">
      <div :style="$cssStyle.headLine">
        {{ this.$route.meta.title }}
      </div>
      
      <el-form size="small" inline>
        <el-form-item>
          <div style="display:flex; justify-content:space-between;">
            <el-input style="width: 250px;" v-model="listPram.keyWord" placeholder="请输入客户名称">
            </el-input>
            <el-button :loading="loading" type="primary"
              style="background-color: rgba(255, 195, 0, 1);border-color:rgba(255, 195, 0, 1);"
              @click="getTableList">搜索</el-button>
          </div>
        </el-form-item>
      </el-form>

      <el-tabs v-model="listPram.type" type="" tab-position="top" @tab-click="getTableList">
        <el-tab-pane v-for="item in panes"
          :key="item.id"
          :label="item.name"
          :name="item.id">          
        </el-tab-pane>
      </el-tabs>

      <el-table ref="tableData" v-loading="loading" :data="listData.list" highlight-current-row
        :header-cell-style="{ background: 'rgba(255, 240, 214, 1)' }"
        :row-style="({ row, rowIndex }) => { return { background: 'rgba(255, 255, 255, 1)' } }">
        <el-table-column label="序号" prop="name" show-overflow-tooltip></el-table-column>
        <el-table-column label="申请时间" prop="name" show-overflow-tooltip></el-table-column>
        <el-table-column label="客户名称" prop="name" show-overflow-tooltip></el-table-column>
        <el-table-column label="发票类型" prop="name" show-overflow-tooltip></el-table-column>
        <el-table-column label="开票金额" prop="name" show-overflow-tooltip></el-table-column>
        <el-table-column label="开票明细"  >          
          <template slot-scope="scope">
            <el-button size="small" type="text" @click="getTableList(scope.row)">查看明细</el-button>
          </template>
        </el-table-column>
        <el-table-column label="开票状态" prop="name" show-overflow-tooltip></el-table-column>
        <el-table-column label="查看发票" prop="name" show-overflow-tooltip></el-table-column> 
        <el-table-column label="审核结果" prop="name" show-overflow-tooltip></el-table-column> 
        <el-table-column label="上传发票"  >
          <template slot-scope="scope">
            <el-button size="small" type="text" @click="getTableList(scope.row)">上传发票</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination :current-page="listPram.page" :page-sizes="constants.page.limit" :layout="constants.page.layout"
        :total="listData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </el-card>
  </div>
</template>

<script>
import * as roleApi from '@/api/role.js'
export default {
  name: "InvoiceList",
  data() {
    return {
      //获取定义的常量
      constants: this.$constants,
      //表格数据
      listData: { list: [{name:'静态页面'}] },
      //提交参数
      listPram: {
        keyWord: null,
        page: 1,
        limit: this.$constants.page.limit[0],
      },
      //多选
      menuList: [],
      loading:false,
      panes:[
        {id:'1',name:'全部'},
        {id:'2',name:'已开票'},
        {id:'3',name:'待开票'},
        {id:'4',name:'开票中'},
      ]
    }
  },
  created() {
    //this.type = parseInt(this.$route.params.type);
    //this.listPram.type = parseInt(this.$route.params.type)
  },
  mounted() {
    this.getTableList()
  },
  methods: {
    //获取表格分页数据
    getTableList() {
      /*
      this.loading = true      
      roleApi.roleGetPageList(this.listPram).then(res => {
        this.listData = res.data
        this.loading = false
      }).catch((err) => {
        this.loading = false
        this.$message.error(err.msg)
      })
      */
    },
    //改变每页行数
    handleSizeChange(val) {
      this.listPram.limit = val
      this.getTableList(this.listPram)
    },
    //改变页数
    handleCurrentChange(val) {
      this.listPram.page = val
      this.getTableList(this.listPram)
    }
  }
}
</script>

<style scoped>

</style>
